<template>
	<view style="padding-bottom: 180upx;">
		<view class="zcModel-card-title">报价列表</view>
		<view class="zcModel-card uni-flex zcFlex_column zcJustifyC_center">
			<view class="zcModel-content uni-flex zcFlex_column">
				<view class="zcModel-list uni-flex zcFlex_column">
					<view class="zcModel-item uni-flex zcAlignI_center zcJustifyC_center zcBlod">
						<view class="">保险公司</view>
						<view class=""></view>
						<view class=""></view>
						<view class="">总保费</view>
					</view>
					<view class="zcModel-item uni-flex zcAlignI_center zcJustifyC_center">
						<view class="">{{InsureOrder.InsureTrafficCompany?InsureOrder.InsureTrafficCompany:InsureOrder.InsureBizCompany?InsureOrder.InsureBizCompany:''}}</view>
						<view class=""></view>
						<view class=""></view>
						<view class="">{{InsureOrder.InsureMoney}}</view>
					</view>
				</view>
				<view class="zcModel-list uni-flex zcFlex_column">
					<view class="zcModel-item uni-flex zcAlignI_center zcJustifyC_center">
						<view class="zcBlod">交强险</view>
						<view class=""></view>
						<view class=""></view>
						<view class="">{{InsureOrder.InsureTrafficMoney}}</view>
					</view>
				</view>
				<view v-if="InsureOrder.InsureTrafficItems.length>0" class="zcModel-list uni-flex zcFlex_column">
					<view class="zcModel-item uni-flex zcAlignI_center zcJustifyC_center">
						<view class="zcBlod">险种类别</view>
						<view class="zcBlod">不计免赔</view>
						<view class="zcBlod">保额</view>
						<view class="zcBlod">保费</view>
					</view>
					<block v-for="(item,index) in InsureOrder.InsureTrafficItems" :key="index" >
						<view class="zcModel-item uni-flex zcAlignI_center zcJustifyC_center">
							<view class="">{{item.InsureTypeName}}</view>
							<view class="">{{item.InsureTypeIsFreePay?'不计免赔':''}}</view>
							<view class="">{{item.InsureAmount?item.InsureAmount:''}}</view>
							<view class="">{{item.InsureMoney}}</view>
						</view>
					</block>
					
				</view>
				<view class="zcModel-list uni-flex zcFlex_column">
					<view class="zcModel-item uni-flex zcAlignI_center zcJustifyC_center">
						<view class="zcBlod">商业险</view>
						<view class=""></view>
						<view class=""></view>
						<view class="">{{InsureOrder.InsureBizMoney}}</view>
					</view>
				</view>
				<view v-if="InsureOrder.InsureBizItems.length>0" class="zcModel-list uni-flex zcFlex_column">
					<view class="zcModel-item uni-flex zcAlignI_center zcJustifyC_center">
						<view class="zcBlod">险种类别</view>
						<view class="zcBlod">不计免赔</view>
						<view class="zcBlod">保额</view>
						<view class="zcBlod">保费</view>
					</view>
					<block v-for="(item,index) in InsureOrder.InsureBizItems" :key="index" >
						<view class="zcModel-item uni-flex zcAlignI_center zcJustifyC_center">
							<view class="">{{item.InsureTypeName}}</view>
							<view >{{item.InsureTypeIsFreePay?'不计免赔':''}}</view>
							<view class="">{{item.InsureAmountText}}</view>
							<view class="">{{item.InsureMoney}}</view>
						</view>
					</block>
				</view>
				
			</view>
		</view>
		<view class="zcFooter-but uni-flex">
			<!-- <button>分享</button> -->
			<button @tap="zcOrderModify">核保</button>
		</view>
	</view>
</template>

<script>
	
	let _this;
	export default {
		data() {
			return {
				InsureOrderSN:'',
				InsureOrder:{}
			}
		},
		onLoad(e) {
			_this = this;
			_this.InsureOrderSN = e.InsureOrderSN;
			_this.zcGetInsureOrder();
		},
		methods: {
			// 跳转到 算价详情页面 进行核保操作
			zcOrderModify() {
				if (_this.InsureOrderSN) {
                    if (_this.InsureOrder.FlowStatus === '已算价') {
                        uni.navigateTo({
                        	url: '../order_countPriceInfo/order_countPriceInfo?InsureOrderSN='+_this.InsureOrderSN
                        });
                    }else {
                        uni.showModal({
                            title: '温馨提示',
                            content: '尊敬的用户您好，您的订单已核保，无法再次核保！',
                            showCancel: false
                        });
                    }
				}
			},
			zcGetInsureOrder() {	// 获取 保单详情接口
				if (!_this.InsureOrderSN) {
					uni.showModal({
						title: '温馨提示',
						content: '尊敬的用户，您查询的订单不存在！',
						showCancel: false
					});
					return;
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_GetInsureOrder',
						Data: {
							SN:_this.InsureOrderSN
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('保单 信息 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data != null) {
								_this.InsureOrder = resjson.data;
							}
							
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
						
					},
					Scope: this
				})
				
			},
		}
	}
</script>

<style>
	.zcModel-card-title{/* background: linear-gradient(left top,#377cfc,#49a5fc);color: #FFFFFF; */padding: 12upx 40upx;}
	.zcModel-card{background-color: #FFFFFF;border-radius: 16upx 16upx 0 0;margin: 40upx 20upx;overflow: hidden;margin-top: 0;box-shadow: 0upx 0 10upx #c5c5c5;}
	.zcModel-list{border-bottom: 2upx dashed #e6e6e6;}
	.zcModel-list:last-child{border: none;}
	.zcModel-item{padding: 10upx 0;}
	.zcModel-item>view{flex-shrink: 0;width: 15%;text-align: center;font-size: 28upx!important;}
	.zcModel-item>view:first-child{width: 40%;}
	.zcModel-item>view:last-child{width: 20%;}
	.zcModel-item>view:nth-child(2){width: 20%;}/* 改变第二列view 样式 */
	.zcBlod{font-weight: bold!important;}
	
	
	.zcFooter-but{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10;background-color: #F4F5F6!important;}
	.zcFooter-but button:first-child{flex: 1;border: 2upx solid #3CA4FA;color: #3CA4FA;border-radius: 0;font-size: 32upx;}
	.zcFooter-but button:last-child{flex: 1;background-color: rgba(60, 164, 250, 1);color: #FFFFFF;border-radius: 0;font-size: 32upx;}
	.button-hover {opacity: 0.6;}
</style>
